// 页面加载时初始化
document.addEventListener('DOMContentLoaded', () => {


    // 获取模态对话框元素
    const addCourseModal = document.getElementById('addCourseModal');
    const addCourseForm = document.getElementById('addCourseForm');

    // 打开模态对话框函数
    window.openAddCourseModal = () => {
        addCourseModal.style.display = 'block';
    };

    // 关闭模态对话框函数
    window.closeAddCourseModal = () => {
        addCourseModal.style.display = 'none';
        addCourseForm.reset();
    };


    // 获取表格的 tbody 元素
    const tableBody = document.querySelector(".table");

    // 向后端发起 GET 请求
    fetch("/course/query") // 替换为实际的学生数据接口路径
        .then(response => response.json()) // 解析响应为 JSON
        .then(data => {
            // 遍历返回的 JSON 数据
            data.forEach(course => {
                // 创建一个新的 tr 元素
                const row = document.createElement("tr");
                row.id = course.id;
                // 插入学生信息到表格行中，并添加删除按钮
                row.innerHTML = `
                    <td>${course.courseName}</td>
                    <td>${course.description}</td> <!-- 注意：密码字段通常不会直接显示在页面上 -->
                    <td>${course.status}</td>
                    <td>${course.student_number}</td>
                    <td>${course.createtime}</td>
                    <td><button class="btn btn-danger" data-id="${course.id}" onclick="showDeleteConfirmModal(this)">🗑 删除</button></td>
                `;

                // 将行添加到表格中
                tableBody.appendChild(row);
            });
        })

        .catch(error => {
            console.error("获取课程数据时出错:", error);
        });

    // 处理新增课程表单提交
    document.getElementById('addCourseForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const formData = new FormData(this);
        const courseData = Object.fromEntries(formData);

        closeAddCourseModal();

        // 在表格中添加新课程
        const tableBody = document.querySelector(".table");
        const row = document.createElement("tr");


        // 发送POST请求到后端API
        fetch('/api/course/insert', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(courseData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 成功保存后更新页面

                alert()
                alert('课程保存成功！');
                row.innerHTML = `
                    <td>${courseData.Cname}</td>
                    <td>${courseData.description}</td> <!-- 注意：密码字段通常不会直接显示在页面上 -->
                    <td>${courseData.status}</td>
                    <td>${courseData.student_number}</td>
                    <td>${courseData.createtime}</td>
                    <td><button class="btn btn-danger" data-id="${courseData.id}" onclick="showDeleteConfirmModal(this)">🗑 删除</button></td>
                `;
                tableBody.appendChild(row);

                // 更新删除按钮事件监听器
                addDeleteEventListeners();

            } else {
                alert('保存失败：' + data.message);
            }
        })
        .catch((error) => {
            console.error('Error:', error);
            alert('发生错误，请查看控制台日志！');
        });
});
});

function searchCourse() {
    // 获取用户输入的课程名
    const courseName = document.getElementById('courseNameInput').value;

    // 向后端发送请求
    fetch(`/course/query?courseName=${encodeURIComponent(courseName)}`, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        }
    })
        .then(response => response.json())  // 解析响应数据为 JSON 格式
        .then(data => {
            // 数据可视化 - 这里使用 table 替代列表形式展示数据
            const container = document.getElementById('table');
            container.innerHTML = '';  // 清空之前的结果
            alert(data.length)
            if (data.length === 0) {
                container.innerText = '未找到相关课程信息';
                return;
            }

            data.forEach(course => {
                // 创建一个新的 tr 元素
                const row = document.createElement("tr");
                row.id = course.id;
                // 插入学生信息到表格行中，并添加删除按钮
                row.innerHTML = `
                    <td>${course.Cname}</td>
                    <td>${course.description}</td> 
                    <td>${course.status}</td>
                    <td>${course.student_number}</td>
                    <td>${course.createtime}</td>
                    <td><button class="btn btn-danger" data-id="${course.id}" onclick="showDeleteConfirmModal(this)">🗑 删除</button></td>
                `;

                // 将行添加到表格中
                container.appendChild(row);
            });
            container.appendChild(table);
        })
        .catch(error => {
            console.error('Error:', error);
            alert('查询过程中发生错误，请查看控制台获取详细信息');
        });
}


// 显示删除确认弹窗
function showDeleteConfirmModal(button) {
    // 直接从按钮获取 data-id 并保存到模态框的数据集中
    var courseId = button.getAttribute('data-id');
    document.getElementById('deleteConfirmModal').dataset.id = courseId;
    document.getElementById('deleteConfirmModal').style.display = 'block';
}

// 关闭删除确认弹窗
function closeDeleteConfirmModal() {
    document.getElementById('deleteConfirmModal').style.display = 'none';
    // 清除模态框中保存的 courseID
    document.getElementById('deleteConfirmModal').dataset.courseId = '';
}

// 确认删除操作
function confirmDelete() {
    // 从弹窗的数据集中获取之前保存的 courseID
    var courseId = document.getElementById('deleteConfirmModal').dataset.id;
    alert(courseId)
    if (!courseId) {
        alert('无法确定要删除的课程，请刷新页面重试！');
        return;
    }

    document.getElementById(courseId).remove();

    // 发送 DELETE 请求到服务器以删除该课程
    fetch('/courses/delete/' + courseId, {
        method: 'DELETE',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 如果删除成功，则移除页面上的相关元素
            document.getElementById('course-' + courseId).remove();
            alert('课程已成功删除！');
        } else {
            alert('删除失败：' + data.message);
        }
    })
    .catch((error) => {
        console.error('Error:', error);
        alert('发生错误，请查看控制台日志！');
    });

}

